.page--typepractice_main
  .title
    color #333
    margin-bottom 30px

  .stats
    display flex
    justify-content space-around
    margin 20px 0
    padding 15px
    background-color #f0f0f0
    border-radius 8px
  
  .stat-box
    background-color white
    padding 10px
    border-radius 5px
    box-shadow 0 2px 5px rgba(0, 0, 0, 0.1)
  
  .target-char
    font-size 80px
    font-weight bold
    margin 20px 0
    color #e74c3c
    text-shadow 2px 2px 4px rgba(0, 0, 0, 0.2)
  
  .keyboard-container
    margin 30px auto
    width 800px
  
  .keyboard-row
    display flex
    justify-content center
    margin-bottom 5px
  
  .keyboard-key
    width 40px
    height 40px
    margin 0 2px
    background-color #f8f8f8
    border 1px solid #ccc
    border-radius 5px
    font-size 18px
    display flex
    align-items center
    justify-content center
    flex-direction column
    cursor pointer
    transition all 0.2s
    user-select none
    position relative
    overflow hidden
    &:hover
      background-color #e0e0e0
    &.active
      background-color #3498db
      color white
      border 1px solid #2980b9
    &.wrong
      background-color #e74c3c
      color white
      border 1px solid #c0392b
    &.span-2
      width 80px
    &.space-key
      width 200px
    &.delete-key
      width 80px
    &.enter-key
      width 80px
    &.lower-char
      font-size 12px
  
  .control-row
    display flex
    justify-content center
    margin 20px 0
  
  button
    padding 10px 20px
    margin 0 10px
    font-size 16px
    background-color #3498db
    color white
    border none
    border-radius 5px
    cursor pointer
    transition background-color 0.3s
    &:hover
      background-color #2980b9
    &:disabled
      background-color #ccc
      cursor not-allowed
  
  .instructions
    text-align left
    margin-top 30px
    padding 15px
    background-color #f9f9f9
    border-left 4px solid #3498db
  
  .timer
    font-size 24px
    margin 20px 0
